<script setup lang="ts">
import axios from 'axios'
import { timeFormatter } from '@/utils/timeHandlers'
import { Edit, CreditCard, Key, User } from '@element-plus/icons-vue'
let imageURL = ref('')
let isVip = ref('否')
let isMale = ref('男')
let userform = ref({
  userid: '',
  usertypeid: '',
  username: '',
  password: '',
  image: '',
  phone: '',
  createtime: '',
  updatetime: '',
  gender: 1,
  vip: 0,
  expiretime: '',
  age: 28,
  state: null,
  money: 0
})
const getUserInfo = () => {
  console.log('获取用户信息')
  axios({
    method: 'get',
    url: 'http://localhost:8080/user/userInfo',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      console.log(res.data.data)
      userform.value = res.data.data
      imageURL.value = res.data.data.image

      UserEditForm.age = res.data.data.age
      UserEditForm.image = res.data.data.image
      UserEditForm.phone = res.data.data.phone
      UserEditForm.gender = res.data.data.gender

      if (userform.value.gender == 1) {
        isMale.value = '男'
      } else {
        isMale.value = '女'
      }
      if (userform.value.vip == 1) {
        isVip.value = '是'
      } else {
        isVip.value = '否'
      }
    },
    (err) => {
      ElMessage.error('获取用户信息失败')
      console.log(err)
    }
  )
}
getUserInfo()

import { reactive, ref } from 'vue'
// 编辑窗口
const isDialogFormVisible = ref(false)

const formLabelWidth = '140px'
const UserEditForm = reactive({
  gender: '',
  phone: '',
  age: 0,
  image: ''
})
//定义表单规则
const rules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    // 这个只能验证手机号
    // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
    {
      pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      message: '请输入合法手机号/电话号',
      trigger: 'blur'
    }
  ]
})
// 编辑基本信息
const submitUserEdit = () => {
  isDialogFormVisible.value = false
  console.log(UserEditForm)
  axios({
    method: 'put',
    url: 'http://localhost:8080/user/update',
    data: UserEditForm,
    headers: {
      // "Content-Type": "application/octet-stream",
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      console.log(res)
      getUserInfo()
      ElMessage.success('信息修改成功')
    },
    (err) => {
      console.log(err)
      ElMessage.success('修改失败,请刷新后再修改')
    }
  )
}
// 修改密码窗口
const isEditPassword = ref(false)
const UserEditPasswordForm = reactive({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})
const submitEditPassword = () => {
  isEditPassword.value = true
  axios({
    method: 'patch',
    url: 'http://localhost:8080/user/updatePwd',
    data: UserEditPasswordForm,
    headers: {
      // "Content-Type": "application/octet-stream",
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      console.log(res)
      ElMessage.success('成功修改密码！')
      getUserInfo()
    },
    (err) => {
      console.log(err)
      ElMessage.error('修改密码失败!')
    }
  )
}
// 充值会员窗口
let month = ref(1)
let isUpdataVip = ref(false)
const updataVip = () => {
  isUpdataVip.value = false
  console.log('充值时长', month.value)
  axios({
    method: 'post',
    url: 'http://localhost:8080/user/updatevip',
    params: {
      month: month.value
    },
    headers: {
      // "Content-Type": "application/octet-stream",
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      console.log(res)
      getUserInfo()
      ElMessage.success('充值成功！')
    },
    (err) => {
      ElMessage.error('充值失败,请刷新网页')
      console.log(err)
    }
  )
}

// 用户上传图片
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const imageUrl = ref('')
// 上传投诉图片
const handleComplainAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  console.log('后回调', response)

  UserEditForm.image = response.data
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
const beforeComplainAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片必须是JPG格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 8) {
    ElMessage.error('图片不能超过8MB!')
    return false
  }
  return true
}
// 充值余额
const isRechargeAmount = ref(false)
const moneyTemp = ref()
function rechargeMoney() {
  console.log(moneyTemp.value)
  axios({
    method: 'post',
    url: 'http://localhost:8080/user/updatemoney',
    params: {
      money: moneyTemp.value,
      userid: window.localStorage.getItem('userID')
    },
    headers: {
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then(
    (res) => {
      console.log(res)
      getUserInfo()
      ElMessage.success('充值成功！')
      isRechargeAmount.value = false
      window.location.reload()
    },
    (err) => {
      ElMessage.error('充值失败,请刷新网页')
      console.log(err)
      isRechargeAmount.value = false
    }
  )
}
</script>

<template>
  <div class="mhy-container mhy-account-center-content">
    <!-- 主页面 -->
    <div class="mhy-account-center-content-container mhy-account-center-collection">
      <div class="mhy-account-center__subheader">
        <span>个人信息详情</span>
        <div class="mhy-account-center-collection-menu">
          <div class="mhy-button mhy-account-center-collection-menu__create mhy-button-outlined">
            <button class="mhy-button__button" @click="isDialogFormVisible = true">编辑</button>
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 20px">
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item label="头像" label-align="center" width="70px">
          <div>
            <el-image :src="userform.image" style="width: 50px; height: 50px"></el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="账户名" label-align="center" width="70px">
          {{ userform.username }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号" label-align="center" width="70px">
          {{ userform.phone }}
        </el-descriptions-item>
        <el-descriptions-item label="年龄" label-align="center" width="70px">
          <el-tag size="small">{{ userform.age }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="性别" label-align="center" width="70px">
          <el-tag effect="plain" size="small" type="primary" v-show="isMale == '男'">{{
            isMale
          }}</el-tag>
          <el-tag effect="plain" size="small" type="danger" v-show="isMale == '女'">{{
            isMale
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="用户ID" label-align="center" width="70px">
          {{ userform.userid }}
        </el-descriptions-item>

        <el-descriptions-item label="注册时间" label-align="center" width="70px">
          {{ timeFormatter(userform.createtime) }}
        </el-descriptions-item>
        <el-descriptions-item label="账户余额" label-align="center" width="70px">
          <div style="display: flex; align-items: center">
            ￥{{ userform.money }}元(人民币)
            <el-button
              @click="isRechargeAmount = true"
              style="margin-left: auto"
              type="primary"
              plain
              >充值</el-button
            >
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="是否为VIP" label-align="center" width="70px">
          <el-tag effect="plain" size="small" type="primary" v-show="isVip == '是'">{{
            isVip
          }}</el-tag>
          <el-tag effect="plain" size="small" type="info" v-show="isVip == '否'">{{
            isVip
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="VIP到期时间" label-align="center" width="70px">
          {{ timeFormatter(userform.expiretime) }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="更换头像" label-align="center" width="70px">
          <button class="mhy-button__button" @click="isDialogFormVisible = true">上传头像</button>
          <el-button type="primary" :icon="Edit" circle @click="editAvatar" style="margin-left: 40%" />
        </el-descriptions-item> -->
        <el-descriptions-item label="购买VIP" label-align="center" width="70px">
          <el-button
            type="primary"
            :icon="CreditCard"
            circle
            @click="isUpdataVip = true"
            style="margin-left: 0%"
          />
        </el-descriptions-item>
        <el-descriptions-item label="修改密码" label-align="center" width="70px">
          <el-button
            type="primary"
            :icon="Key"
            circle
            @click="isEditPassword = true"
            style="margin-left: 0%"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--编辑基本信息窗口-->
    <el-dialog
      v-model="isDialogFormVisible"
      title="编辑基本信息"
      width="500"
      align-center
      style="border-radius: 15px"
    >
      <el-form :model="UserEditForm" :rules="rules">
        <el-form-item label="更换头像" :label-width="formLabelWidth" prop="phone">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/data/image"
            :show-file-list="false"
            :on-success="handleComplainAvatarSuccess"
            :before-upload="beforeComplainAvatarUpload"
            size="large"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="UserEditForm.phone" autocomplete="off" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input-number v-model="UserEditForm.age" :min="1" :max="120" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="UserEditForm.gender" placeholder="请选择您的性别">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUserEdit">提交</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 充值会员 -->
    <el-dialog
      v-model="isUpdataVip"
      title="充值会员"
      width="500"
      align-center
      style="border-radius: 15px"
    >
      <el-form>
        <el-form-item label="充值时长(月)" :label-width="formLabelWidth">
          <el-input-number v-model="month" :min="1" :max="12" size="default" value-on-clear="min" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isUpdataVip = false">取消充值</el-button>
          <el-button type="primary" @click="updataVip">确认充值 {{ month }}个月</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog
      v-model="isEditPassword"
      title="修改密码"
      width="500"
      align-center
      style="border-radius: 15px"
    >
      <el-form :model="UserEditPasswordForm">
        <el-form-item label="旧密码" :label-width="formLabelWidth" prop="old_pwd">
          <el-input
            v-model="UserEditPasswordForm.old_pwd"
            autocomplete="off"
            placeholder="请输入旧密码"
          />
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="new_pwd">
          <el-input
            v-model="UserEditPasswordForm.new_pwd"
            autocomplete="off"
            placeholder="请输入新密码"
          /> </el-form-item
        ><el-form-item label="再次输入新密码" :label-width="formLabelWidth" prop="re_pwd">
          <el-input
            v-model="UserEditPasswordForm.re_pwd"
            autocomplete="off"
            placeholder="请再次输入新密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isEditPassword = false">取消</el-button>
          <el-button type="primary" @click="submitEditPassword">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 充值余额 -->
    <el-dialog v-model="isRechargeAmount" title="Shipping address" width="500">
      <el-form>
        <el-form-item label="Promotion name" :label-width="formLabelWidth">
          <el-input v-model="moneyTemp" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isRechargeAmount = false">取消</el-button>
          <el-button type="primary" @click="rechargeMoney"> 确认充值 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.mhy-account-center-content {
  width: 100%;
  float: right;
}

.mhy-container {
  background-color: #fff;
  border-radius: 4px;
}

p {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

.mhy-account-center__subheader {
  padding: 0 30px;
  line-height: 50px;
  border-bottom: 1px solid #ebebeb;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.mhy-account-center-collection-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 14px;
}

.mhy-account-center-collection-menu .mhy-button {
  height: 28px;
  line-height: 28px;
  font-weight: 600;
}

.mhy-account-center-collection-menu__create {
  width: 88px;
}

.mhy-button {
  display: inline-block;
  cursor: pointer;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.mhy-button-outlined .mhy-button__button {
  background-color: #fff;
  color: #00b2ff;
  border: 1px solid #00c3ff;
  border-radius: 4px;
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-property: border-color, color;
  -o-transition-property: border-color, color;
  transition-property: border-color, color;
}

.mhy-button__button {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  font-size: inherit;
  color: inherit;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-weight: inherit;
  line-height: inherit;
}

// 用户编辑头像
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<!-- 还是用户编辑头像 -->
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>
